<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <link rel="stylesheet" href="../css/my-css.css">
</head>
<body>
<div id="app" >
    <el-container style="height: 800px">
        <my-header></my-header>
        <el-main  style="width: 1200px; height: 600px; margin: 0 auto;padding-left: 125px">
            <el-row gutter="20">
                <el-col span="4">
                    <el-card style="height: 500px">
                        <p @click="location.href='../usermodel/personal.html'" style="margin-bottom: 30px;cursor: pointer">个人信息</p>
                        <p @click="location.href='../usermodel/friendlist.html'" style="margin-bottom: 30px;cursor: pointer">好友列表</p>
                        <p @click="location.href='../notemodel/noteManagement.html'" style="margin-bottom: 30px;cursor: pointer">笔记管理</p>
                        <p style="color: #409EFF">视频管理</p>
                    </el-card>
                </el-col>
                <el-col span="20">
                    <el-card>
                        <el-button type="primary" @click="location.href='postVideo.html'">发视频</el-button>
                        <!--内容列表开始-->
                        <el-table :data="contentArr" border>
                            <el-table-column label="标题" width="150px"
                                             prop="title" align="center"></el-table-column>
                            <el-table-column label="封面" width="60px">
                                <template slot-scope="scope">
                                    <img :src="scope.row.cover" width="50px">
                                </template>
                            </el-table-column>
                            <el-table-column label="摘要" width="300px" align="center">
                                <template slot-scope="scope">
                                    <!--scope.row代表当前行对应的数组里面的对象-->
                                    <div v-html="scope.row.brief"></div>
                                </template>
                            </el-table-column>
                            <el-table-column label="学科"
                                             prop="name" align="center"></el-table-column>
                            <el-table-column label="浏览量"
                                             prop="playCount" align="center"></el-table-column>
                            <el-table-column label="回复量"
                                             prop="contentCount" align="center"></el-table-column>
                            <el-table-column label="点赞量"
                                             prop="upvoteCount" align="center"></el-table-column>
                            <el-table-column label="创建时间" width="300"
                                             prop="createTime" align="center"></el-table-column>
                            <el-table-column label="修改时间" width="300"
                                             prop="updateTime" align="center"></el-table-column>
                            <el-table-column label="操作"  width="200px" fixed="right"
                                             align="center">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="success"
                                               @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                    <el-button size="mini" type="danger"
                                               @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!--内容列表结束-->
                    </el-card>
                </el-col>
            </el-row>
        </el-main>
        <my-footer></my-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--引入Axios-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<!--引入自己的js文件-->
<script src="../js/my-header.js"></script>
<script src="../js/my-footer.js"></script>
<script>

    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                contentArr:[{
                    title:'',cover:'',brief:'',name:'',playCount:'',contentCount:'',upvoteCount:'',createTime:'',updateTime:''
                }]
            }
        },
        methods: {
            handleDelete(i,content){
                if (confirm("您确定删除此内容吗?")){
                    //发出删除请求
                    axios.post("/v1/video/"+content.id+"/deleteById").then(function (response) {
                        if (response.data.code==20000){
                            v.$message.success("删除完成!");
                            v.contentArr.splice(i,1);//删除页面中的内容
                        }
                    })
                }
            },
            handleEdit(i,content){
                location.href="/postVideo.html?id="+content.id;
            },
            // loadList(){
            //     //发出获取内容的请求
            //     axios.get("/v1/video/"+user.id+"/listContent").then(function (response) {
            //         if (response.data.code==20000){
            //             v.contentArr = response.data.data;
            //         }else{
            //             alert("请先登录!");
            //             location.href = "../usermodel/login.html";
            //         }
            //     })
            // }
        },
        created() {
            axios.get("/v1/video/listVideoDetail").then(function (response) {
                console.log(response);
                if (response.data.code==20000){
                    v.contentArr = response.data.data;
                }else{
                    alert("请先登录!");
                    location.href = "../usermodel/login.html";
                }
            })
        }
    })
</script>
</html>